<template>
  <div style="margin-left:10px">
    <el-card>
 <div class="top-time-search">
      <el-date-picker
      v-model="startTime"
      type="daterange"
      range-separator="至"
      start-placeholder="开始月份"
      end-placeholder="结束月份">
    </el-date-picker>
    <el-button type="primary" @click="searchRecords()">查询</el-button>
    </div>
    </el-card>
    <div style="margin-top:20px;font-weight:bold;">历史考勤</div>
    <div style="margin-top:20px"  v-for="(item,index) in historyList" :key="index">
 <el-descriptions :title=item.time :column="3" size="medium" border>
    <template slot="extra">
      <el-button type="primary" size="small">导出</el-button>
    </template>
       <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        打卡人数
      </template>
      {{item.realnumber+'人'}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        上班打卡
      </template>
        {{item.up+'人'}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        下班打卡
      </template>
        {{item.down+'人'}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        迟到
      </template>
      <el-tag size="small">
                {{item.later+'人'}}
      </el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
        缺卡
      </template>
                {{item.extra+'人'}}

    </el-descriptions-item>
     <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
        请假
      </template>
          {{item.holiday+'人'}}
    </el-descriptions-item>
  </el-descriptions> 
    </div>
   
  </div>
</template>

<script>

export default {
  inject: ["reload"],
  data() {
    return {
      historyList:[
        {
          'time':'2021-11-20',
          'realnumber' : 40,
          'up' : 40,
          'down' : 30,
          'later' : 1,
          'extra' : 1,
          'holiday' : 0
        },
        {
          'time':'2021-11-21',
          'realnumber' : 40,
          'up' : 40,
          'down' : 30,
          'later' : 1,
          'extra' : 1,
          'holiday' : 0
        },
        {
          'time':'2021-11-22',
          'realnumber' : 40,
          'up' : 40,
          'down' : 30,
          'later' : 1,
          'extra' : 1,
          'holiday' : 0
        },
        {
          'time':'2021-11-23',
          'realnumber' : 40,
          'up' : 40,
          'down' : 30,
          'later' : 1,
          'extra' : 1,
          'holiday' : 0
        },
        {
          'time':'2021-11-24',
          'realnumber' : 40,
          'up' : 40,
          'down' : 30,
          'later' : 1,
          'extra' : 1,
          'holiday' : 0
        },
        {
          'time':'2021-11-25',
          'realnumber' : 40,
          'up' : 40,
          'down' : 30,
          'later' : 1,
          'extra' : 1,
          'holiday' : 0
        }
      ],
        startTime:'',
        endTime:''
      
      }
      
  },
  components:{

  },
  methods:{
    searchRecords(){
      console.log(this.startTime);
    }
  }

 }

</script>
<style lang="less" scoped>
.record {
  font-weight: bold;
}
.top-time-search {
  display: flex;
  .el-button{
        margin:auto 20px;
  }
}

</style>